// 公共配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProvidePlugin } = require('webpack')
const WebpackBar = require('webpackbar')

module.exports = {
    // 入口
    // entry:'./src/main.js',  // 相对路径
    // entry:path.resolve(__dirname,'src/main.js'),  //绝对路径
    entry: {  //对象形式
        // 把第三方包从业务代码中抽离出来，方便后面对第三方包做CDN优化
        chunk: ['react', 'react-dom/client'],
        // app---入口文件名字，打包后的资源也是app
        app: {
            // import 指定业务代码(项目源码)的入口
            import: path.resolve(__dirname, '../', 'src/main.js'),
            // 业务代码依赖第三方包
            dependOn: 'chunk',
        }
    },
    // 出口
    output: {
        path: path.resolve(__dirname, '../', 'dist'), //必须指定绝对路径
        // filename:'js/bundle.js' // 打包后的文件名(可以放到文件夹下面)
        // [name]---格式化字符串    [chunkhash:8]---哈希值
        // 输入的js模块所依赖的源码发生变化 打包时，hash值也会变化 用于解决浏览器缓存导致的页面不刷新的问题
        filename: '[name].[chunkhash:8].js',
        clean: true, // 每次打包自动删除上次打包的文件
    },
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../', './public/index.html'),
            inject: 'body', // 将js脚本注入body结束标签前
            filename: 'index.html', // 指定打包后页面的名字
            title: 'vue-element-admin', // 指定页面title标题
            favicon: path.resolve(__dirname, '../', 'public/favicon.ico'),
        }),
        // 打包进度条
        new WebpackBar({
            color: "#FD6585",  // 默认green，进度条颜色支持HEX
            basic: false,   // 默认true，启用一个简单的日志报告器
            profile: false,  // 默认false，启用探查器。
        }),
        new ProvidePlugin({
            // 将react放到全局，所有模块都可以直接使用
            React: path.resolve(__dirname, '../', 'node_modules/react/index.js')
        })
    ],
    // 模块 在webpack中一切都是模块
    module: {
        rules: [
            // babel-loader加载，加载完使用@babel/** 进程编译转化成es5代码
            // exclude 排队第三方包的编译
            {
                test: /\.(js|jsx|ts|tsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/   // 不打包node_modules
            },
            {
                test: /\.(css|scss)$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|svg|gif|jepg|webp)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'img/[name].[contenthash:8][ext]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            // 配置解析src路径
            '@': path.resolve(__dirname, '../', 'src')
        },
        // 配置省略哪些后缀
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    }
}